<template>
  <div class=''>
    <el-dialog :model-value="props.updateMoneryInfoVis" :show-close="true" title="修改费用信息" width="50%"
      :before-close="handleClose">
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="商品合计">￥{{ props.updateMoneryInfoParams?.totalAmount }}</el-descriptions-item>
        <el-descriptions-item label="运费">
          <div> <el-input v-model="freightAmount">
              <template #prepend>-￥</template>
            </el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="优惠券">-￥{{ props.updateMoneryInfoParams?.discountAmount }}</el-descriptions-item>
        <el-descriptions-item label="积分抵扣">
          {{ props.updateMoneryInfoParams?.integrationAmount }}
        </el-descriptions-item>
        <el-descriptions-item label="活动优惠">
          <div style="width: 100px;">-￥{{ props.updateMoneryInfoParams?.promotionAmount }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="折扣金额">
          <div> <el-input v-model="discountAmount">
              <template #prepend>-￥</template>
            </el-input>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="订单总金额">
          <div class="total">￥{{ props.updateMoneryInfoParams?.totalAmount }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="应付款金额">
          <div class="total">￥{{ props.updateMoneryInfoParams?.payAmount }}
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import * as orderDetail from "@/request/oms_orderDetail"
import { ElMessage, ElMessageBox } from 'element-plus';
const props = defineProps(["updateMoneryInfoParams", "updateMoneryInfoVis"])
const emits = defineEmits()
const discountAmount = ref(0)
const freightAmount = ref(0)
const handleClose = () => {
  emits("closeUpdateMonetyInfo")
}
watch(() => props.updateMoneryInfoParams.discountAmount, () => {
  discountAmount.value = props.updateMoneryInfoParams.discountAmount;
  freightAmount.value = props.updateMoneryInfoParams.freightAmount;
}, { immediate: true })
const submit = () => {
  const moneyInfoParam = {
    discountAmount: discountAmount.value,
    freightAmount: freightAmount.value,
    orderId: props.updateMoneryInfoParams.orderId,
    status: props.updateMoneryInfoParams.status
  }

  ElMessageBox.confirm(
    '您确定要修改费用信息吗？',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      orderDetail.updateMoneryInfo(moneyInfoParam).then(res => {
        console.log(res);
        if (res.code === 200) {
          ElMessage.success("修改费用信息成功")
        } else {
          ElMessage.error("修改费用信息失败")
        }
      }).finally(() => {
        emits("closeUpdateMonetyInfo")
        emits("getOrderDetail")
      })
    })
    .catch(() => {
      ElMessage.success("已取消修改费用信息")
    })

}
</script>

<style lang="less" scoped>
.total {
  color: #f40;
}

::deep .el-input-group--prepend>.el-input__wrapper {
  width: 64px;
}
</style>